<template>
    <div class="client-item">
      <div class="bg-white">
        <router-link class="client-desc" :to="{path:'normal-clients-detail', query:{custom_id:client.id, custom_type:custom_type}}">
          <span class="img-wrapper"><img data-object-fit="cover" :src="client.head_img_url" /></span>
          <span class="social-name">{{ client.nick_name }}</span>
          <span class="social-name">{{ client.parent_name }}</span>
        </router-link>
        <div class="property-items">
          <div class="property-item">
            {{ client.parent_name | getParentname }}
          </div>
          <div class="property-item">{{ client.custom_property | getUserByType }}</div>
          <div class="property-item">{{ client.custom_status | getStatename }}</div>
        </div>
        <!-- <div class="label-list">
          <label v-for="(label, index) in client.labels " :key="index" class="label-item">
            <router-link :to="label.link">{{ label.name }}</router-link>
          </label>
        </div> -->
      </div>
    </div>
</template>

<script>

var objectFitImages = require('object-fit-images');

  export default{
    props:{
      client: {
      type : Object,
      require: true
      }
    },
    data () {
      return {
        custom_type:0
      };
    },
    methods:{

    },

    mounted () {
      this.custom_type = this.$route.query.custom_type
    },

    components:{

    }
  }
</script>

<style lang="less">
  @import '../less/index.less';

  .client-item {
    background-color: white;
    padding: 10px 0 1px 0;
    padding-left: 10px;

    .bg-white{
      // padding-bottom: 15px;
      border-bottom: 1px solid #e0dcdc;

    }

    .client-desc {
       display: block;

       &>*{
       vertical-align: middle;
       }
    }

    .img-wrapper {

      width: 3em;
      height: 3em;
      display: inline-block;

      img {
        border-radius: 3em;
        border: 1px solid #eee;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }

    a,a:hover,a:visited,a:focus{
      color:#323333;
    }

    .social-name{
      display: inline-block;
      margin-left: 10px;
    }

    .property-items {
      margin:2px 0 2px;
    }

    .property-item {
      display: inline-block;
      padding-right: 12px;
      line-height: 15px;
      height: 15px;
      font-size: 14px;
    }

    .property-item:not(:first-child) {
      padding-left: 12px;
    }

    .property-item:not(:last-child) {
      border-right: 1px solid #B2B2B2;
    }

    .label-list{

      &:extend(.clearfix all);

      label{
        float: left;
      }

      a {
        padding: 2px 8px;
        display: block;
        color: white;
        font-size: 12px;
        border-radius: 6px;
        margin-right: 10px;
        background-color: #35ADFF;
      }
    }

  }
</style>
